<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>教育云平台-注册</title>
	<link rel="stylesheet" type="text/css" href="/EECloud/resource/public/bootstrap/css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="/EECloud/resource/public/bootstrap/css/bootstrap-responsive.css"/>
	<link rel="stylesheet" type="text/css" href="/EECloud/resource/css/global.css"/>
	<script type="text/javascript" src="/EECloud/resource/jquery/jquery.js"></script>
	<style type="text/css">

		.row-fluid .span6{
			text-align: center;
			height: auto;
			/*background-color: black;*/
		}

		#reg > li > a{
			padding: 15px 5px;
		}
		.control-group{
			margin-right: 0px;
			margin-left: 0px;
		}

		.reg-box{
			margin: 30px auto;
			background-color:;
			width: 750px;

		}
		.reg-content{
			/*text-align: center;*/
			padding-left: 80px;

		}

	</style>
</head>
<body>
	<div class="container-fluid" style="min-width:650px">
		<div class="navbar navbar-inverse">
			<div class="navbar-inner">

				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	            </button>

				<a  class="brand" href="" >教育云平台</a>
				<ul class="nav">
					<li class=""><a href="/EECloud/index.php/index">首页</a></li>
					<li><a href="#">关于</a></li>
					<li><a href="#">联系</a></li>
				</ul>
				<ul class="nav" id="reg" style="float:right;font-size:12px">
					<li style="padding: 15px 5px;color:red">您还未登录！</li>
					<li style="padding:15px 0px">|</li>
					<li><a href="/EECloud/index.php/login">登录</a></li>
					<li style="padding:15px 0px">|</li>
					<li><a href="/EECloud/index.php/register">注册</a><li>
					<li style="padding:15px 0px">|</li>
					<li><a href="">客户端下载</a><li>
				</ul>
			</div>
		</div>
	</div>

	<div class="container-fluid" >
		<div class="reg-box">
			<div class="reg-header">
				<legend>会员注册</legend>
			</div>
			<div class="reg-content">
				<table>
					<tr>
						<td style="padding-bottom:40px;padding-right:20px"><dfn>*</dfn>&nbsp;&nbsp;E-mail:</td>
						<td>
							<div>
								<input type="text" name="email" placeholder="E-mail" id="email"/>
							</div>
							<div class="twoline">（有效的E-mail地址才能收到激活码，帐户在激活后才能享受网站服务。）</div>
						</td>
					</tr>
					<tr>
						<td style="padding-bottom:40px;padding-right:20px"><dfn>*</dfn>&nbsp;&nbsp;昵称:</td>
						<td>
							<div>
								<input type="text" name="username" placeholder="昵称" id="userName"/>
							</div>
							<div class="twoline">（昵称将在全站显示。支持中文、英文、数字、"_"、"-"）</div>
						</td>
					</tr>
					<tr>
						<td style="padding-bottom:40px;padding-right:20px"><dfn>*</dfn>&nbsp;&nbsp;密码:</td>
						<td>
							<div>
								<input type="password" name="password" placeholder="密码" id="password"/>
							</div>
							<div class="twoline">（为了您帐户的安全，建议使用字符+数字等多种不同类型的组合，且长度大于6位。）</div>
						</td>
					</tr>
					<tr>
						<td style="padding-bottom:40px;padding-right:20px"><dfn>*</dfn>&nbsp;&nbsp;请再次输入密码:</td>
						<td>
							<div>
								<input type="password" name="password2" placeholder="请再次输入密码" id="password2"/>
							</div>
							<div class="twoline">（确保您记住密码。）</div>
						</td>
					</tr>
					<tr>
						<td style="padding-right:20px"><dfn>*</dfn>&nbsp;&nbsp;注册条款:</td>
						<td>
							<div>
								<input type="checkbox" name="chkRemeber" style="margin-bottom:5px" id="chkRember"/><span>&nbsp;&nbsp;我已仔细阅读并接受教育云平台<a href="">注册条款</a></span><span id="warning"></span>
							</div>
						</td>	
					</tr>
					<tr>
						<td></td>
						<td>
							<a href="javascript:void(0);" class="btn btn-primary btn-large" style="margin-top:10px" id="sign">注&nbsp;&nbsp;册</a>
						</td>
						
					</tr>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">

		function checkEmailFocused(email){
			$(".email_error").remove();
			$("#email").parent().find("img").remove();
			$(".email_sug").remove();
			if(email.val() == ''){
				$("#email").parent().append("<span class='email_sug'>请输入邮箱</span>");
			}
		}

		function checkUserNameFocused(userName){
			$(".userName_error").remove();
			$("#userName").parent().find("img").remove();
			$(".userName_sug").remove();
			if(userName.val() == ''){
				$("#userName").parent().append("<span class='userName_sug'>请输入用户名</span>");
				// $('#userName').parent().append("<img style='margin-left:5px' src='/EECloud/index.php/resource/img/pic_error.gif'/><span class='userName_error'>请输入用户名</span>");
			}
		}

		function checkPwFocused(password){
			$('.password_error').remove();
			$("#password").parent().find("img").remove();
			$('.password_sug').remove();
			if (password.val() == ''){
				$('#password').parent().append("<span class='password_sug'>请输入密码</span>");
			}
		}

		function checkPw2Focused(password){
			$('.password2_error').remove();
			$("#password2").parent().find("img").remove();
			$('.password2_sug').remove();
			if(password.val() == ''){
				$('#password2').parent().append("<span class='password2_sug'>请再次确认密码</span>");
			}
		}

		function checkEmail(emailAdd){
			if(!emailAdd){
				$("#email").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='email_error'>邮箱不能为空</span>");
			}else{
				var eAd = $("#email").val();
				var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if(!myreg.test(eAd)){
					$(("#email")).parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='email_error'>请输入正确的邮箱地址</span>");
					return false;
				}else{
					$.post('/EECloud/index.php/register/ajax_check_email','email=' + emailAdd,function(data){
						if(!data.success && $("#email").val()){
							$("#email").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='email_error'>该邮箱已注册</span>");
							return false;
						}else{
							$("#email").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_ok.gif'/>");
							return true;
						}
					} ,'json');
				}
			}
		}

		function checkUserName(userName){
			if(!userName){
				$("#userName").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='userName_error'>用户名不能为空</span>");
			}else{
				$.post('/EECloud/index.php/register/ajax_check_userName','userName=' + userName ,function(data){
					if(!data.success && userName){
						$("#userName").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='userName_error'>该用户名已注册</span>");
						return false;
					}else{
						$("#userName").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_ok.gif'/>");
						return true;
					}
				},'json');
			}

		}


		function checkPw(password){
			if(!password){
				$("#password").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='password_error'>密码不能为空</span>");
			}else{
				var len = password.length;
				if(len<6){
					$('#password').parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span class='password_error'>密码长度不小于6</span>");
					return false;
				}else{
					$("#password").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_ok.gif'/>");
					return true;
				}
			}
		}

		function onCheckInput(){
			var email = $('#email').val();
			var userName = $('#userName').val();
			var password = $('#password').val();
			var password2 = $("#password2").val();

			if (email == ""){
				$('#email').focus();
				return false;
			}else if (userName == ""){
				$('#userName').focus();
				return false;
			}else if (password == ""){
				$('#password').focus();
				return false;
			}else if(password2 == ""){
				$("#password2").focus();
				return false;
			}else{
				 return true;
			}
			
		}
		
		function onCheckbox(){
			$(".clause_error").remove();
			$("#chkRember").parent().find("img").remove();
			var oInput = $("#chkRember")[0];
			// alert($("#chkRember")[0]);
			if(oInput.checked == false){
				var oSpan = $("#warning")[0];
				oSpan.innerHTML = "<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span  class='clause_error'>您尚未阅读注册条款</span>";
				return false;
			}else{
				return true;
			}
		}

		$(document).ready(function(){

			$("#email").focus(function(){
				checkEmailFocused($("#email"));
			});

			$("#userName").focus(function(){
				checkUserNameFocused($("#userName"));
			});

			$("#password").focus(function(){
				checkPwFocused($("#password"));
			});

			$("#password2").focus(function(){
				checkPw2Focused($("#password2"));
			});

			$("#email").blur(function(){

				$(".email_error").remove();
				$(".email_sug").remove();
				$(".email_suc").remove();
				$(".clause_error").remove();
				$("#email").parent().find("img").remove();

				var emailAdd = $("#email").val();
				checkEmail(emailAdd);

			});


			$("#userName").blur(function(){
				$(".userName_error").remove();
				$(".userName_sug").remove();
				$(".userName_suc").remove();
				$(".clause_error").remove();
				$("#userName").parent().find("img").remove();

				var userName = $("#userName").val();
				checkUserName(userName);
			});

			$("#password").blur(function(){
				$(".password_error").remove();
				$(".password_sug").remove();
				$(".password_suc").remove();
				$(".clause_error").remove();
				$("#password").parent().find("img").remove();

				var password = $("#password").val();
				checkPw(password);
			});

			$("#password2").blur(function(){
				$(".password2_error").remove();
				$(".password2_sug").remove();
				$(".password2_suc").remove();
				$(".clause_error").remove();
				$("#password2").parent().find("img").remove();
				var pw = $("#password").val();
				var pw2 = $("#password2").val();
				if(pw2 == ''){
					$('#password2').parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span class='password2_error'>请再次输入密码</span>");
					return false;
				}else if(pw != pw2){
					$('#password2').parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_error.gif'/><span class='password2_error'>两次输入密码不一致</span>");
					return false;
				}else{
					$("#password2").parent().append("<img style='margin-left:5px' src='/EECloud/resource/img/pic_ok.gif'/>");
					return true;
				}
				
			});

			$("#chkRember").click(function(){
				$(".clause_error").remove();
				$("#chkRember").parent().find("img").remove();
			});


			$("#sign").click(function(){
				var userName = $("#userName").val();
				var email = $("#email").val();
				var password = $("#password").val();
				var res = true;
				if(!onCheckInput()){
					res = false;
				}else if($(".userName_error").length>0){
					res = false;
				}else if($(".email_error").length>0){
					res = false;
				}else if($(".password_error").length>0){
					res = false;
				}else if($(".password2_error").length>0){
					res = false;
				}else if(!onCheckbox()){
					res = false;
				}

				if(!res){
					return false;
				}else{
					$.post('/EECloud/index.php/register/add_user','email=' + email + '&userName=' + userName + '&password=' + password,function(data){
						window.location.href = '/EECloud/index.php/index';
					});
				}
				
			});


		});

	</script>
</body>
</html>